<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-input placeholder="检索人物..." prefix-icon="el-icon-search" v-model="searchInput" class="search-input">
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button class="search-button" @click="getSearchRelations">搜索</el-button>
      </el-col>
    </el-row>
    <View3d :graphData="searchRelations" v-if="searchRelations" :colors=colors :types=types ref="_3d"></View3d>
  </div>
</template>

<script>
import View3d from '@/components/View3d.vue'
import { search_relation } from '@/network/api/graph'
export default {
  components: {
    View3d
  },
  data() {
    return {
      searchRelations: null,
      searchInput: '',
      colors: ['#5470c6', '#91cc75', '#FFB6C1', '#ee6666'],
      types: ['魏国', '蜀国', '吴国', '群雄'],
      count: 0
    }
  },
  methods: {
    async getSearchRelations() {
      if (this.searchInput.trim() === '' || !this.searchInput) return this.$message.warning('请先填写要检索的人物')
      const res = await search_relation(this.searchInput.trim())
      this.searchRelations = this.parserData(res)
      if (this.count !== 0) {
        this.$refs._3d.getAllCategory(this.searchRelations)
        this.$refs._3d.refresh(this.searchRelations)
      }
      this.count++
    },
    parserData(data) {
      if (!data) return console.log('数据为空')
      const nodes = data.data
      nodes.forEach((item, index) => {
        item.id = index
      });
      const newValue = {
        nodes: nodes,
        links: data.links
      }
      return newValue
    },
  },
  mounted() {

  },
}
</script>

<style scoped>
.search-button {
  margin-left: 15px;
}
</style>

